import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Spin } from 'antd';
import { UserOutlined, BookOutlined, ShoppingCartOutlined, OrderedListOutlined } from '@ant-design/icons';
import { userApi, bookApi, orderApi } from '../../api';

const Dashboard = () => {
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalBooks: 0,
    totalOrders: 0,
    totalSales: 0
  });

  useEffect(() => {
    const fetchDashboardData = async () => {
      setLoading(true);
      try {
        // 这里应该调用后端API获取仪表盘数据
        // 由于后端可能还没有实现这些接口，我们先模拟一些数据
        
        // 模拟获取用户总数
        const userResponse = await userApi.getAllUsers(0, 1);
        const totalUsers = userResponse.totalElements || 0;
        
        // 模拟获取书籍总数
        const bookResponse = await bookApi.getAllBooks(0, 1);
        const totalBooks = bookResponse.totalElements || 0;
        
        // 模拟获取订单总数和销售额
        const orderResponse = await orderApi.getAllOrders({page: 0, size: 1});
        const totalOrders = orderResponse.totalElements || 0;
        
        // 获取销售统计
        const salesStats = await orderApi.getBookSalesStatistics();
        const totalSales = salesStats.totalSales || 0;
        
        setStats({
          totalUsers,
          totalBooks,
          totalOrders,
          totalSales
        });
      } catch (error) {
        console.error('获取仪表盘数据失败:', error);
        // 如果API调用失败，使用模拟数据
        setStats({
          totalUsers: 0,
          totalBooks: 0,
          totalOrders: 0,
          totalSales: 0
        });
      } finally {
        setLoading(false);
      }
    };

    fetchDashboardData();
  }, []);

  return (
    <Spin spinning={loading}>
      <div>
        <h2>仪表盘</h2>
        <p>欢迎使用图书商城管理系统</p>
        
        <Row gutter={16}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总用户数"
                value={stats.totalUsers}
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="总书籍数"
                value={stats.totalBooks}
                prefix={<BookOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="总订单数"
                value={stats.totalOrders}
                prefix={<OrderedListOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="总销售额 (元)"
                value={stats.totalSales}
                precision={2}
                prefix={<span>¥</span>}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </Spin>
  );
};

export default Dashboard; 